<template>
	<breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
	<!-- 外壳 -->
	<div class="common-wrapped">
		<div class="common-content">
			<el-tabs v-model="activeName" class="demo-tabs">
			    <el-tab-pane label="账号详情" name="first">
					
					<div class="account-infor-wrapped">
						<span>用户头像：</span>
						<div class="account-infor-content">
							<el-upload
							    class="avatar-uploader"
							    action="http://127.0.0.1:3007/user/uploadAvatar"
							    :show-file-list="false"
							    :on-success="handleAvatarSuccess"
							    :before-upload="beforeAvatarUpload"
							  >
							    <img v-if="userStore.imageUrl" :src="userStore.imageUrl" class="avatar" />
							    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
							  </el-upload>
						</div>
					</div>
					
					<div class="account-infor-wrapped">
						<span>用户账号：</span>
						<div class="account-infor-content">
							  <el-input v-model="userStore.account" disabled />
						</div>
					</div>
					
					<div class="account-infor-wrapped">
						<span>用户密码：</span>
						<div class="account-infor-content">
							  <el-button type="primary" @click="openChangePassword">修改密码</el-button>
						</div>
					</div>
					
					<div class="account-infor-wrapped">
						<span>用户姓名：</span>
						<div class="account-infor-content">
							  <el-input v-model="userStore.name"/>
						</div>
						<div class="account-save-button">
							 <el-button type="primary" @click="saveName">保存</el-button>
						</div>
					</div>
					
					
					<div class="account-infor-wrapped">
						<span>用户性别：</span>
						<div class="account-infor-content">
						    <el-select v-model="userStore.sex">
								<el-option label="男" value="man" />
								<el-option label="女" value="woman" />
							</el-select>
						</div>
						<div class="account-save-button">
							 <el-button type="primary" @click="saveSex">保存</el-button>
						</div>
					</div>
					
					<div class="account-infor-wrapped">
						<span>用户身份：</span>
						<div class="account-infor-content">
							  <el-input v-model="userStore.identity" disabled />
						</div>
					</div>
					
					
					<div class="account-infor-wrapped">
						<span>用户部门：</span>
						<div class="account-infor-content">
							  <el-input v-model="userStore.department" disabled />
						</div>
					</div>
					
					<div class="account-infor-wrapped">
						<span>用户邮箱：</span>
						<div class="account-infor-content">
							  <el-input v-model="userStore.email"/>
						</div>
						<div class="account-save-button">
							 <el-button type="primary" @click="saveEmail">保存</el-button>
						</div>
					</div>
					
				</el-tab-pane>
			    <el-tab-pane label="公司信息" name="second">
					
					<div class="account-infor-wrapped">
						<span>公司名称：</span>
						<div class="account-infor-content">
							  <el-input v-model="companyName"/>
						</div>
						<div class="account-save-button">
							 <el-button type="primary" @click="changeCompanyname">编辑公司名称</el-button>
						</div>
					</div>
					
					<div class="account-infor-wrapped">
						<span>用户介绍：</span>
						<div class="account-infor-content">
							  <el-button type="success" @click="openEditor(1)">编辑公司介绍</el-button>
						</div>
					</div>
					
					<div class="account-infor-wrapped">
						<span>公司架构：</span>
						<div class="account-infor-content">
							  <el-button type="success" @click="openEditor(2)">编辑公司介绍</el-button>
						</div>
					</div>
					
					
					<div class="account-infor-wrapped">
						<span>公司战略：</span>
						<div class="account-infor-content">
							  <el-button type="success" @click="openEditor(3)">编辑公司介绍</el-button>
						</div>
					</div>
					
					
					
					<div class="account-infor-wrapped">
						<span>公司高层：</span>
						<div class="account-infor-content">
							  <el-button type="success"@click="openEditor(4)" >编辑公司介绍</el-button>
						</div>
					</div>
					
				</el-tab-pane>
			    <el-tab-pane label="首页管理" name="third">
					<div class="home-wrapped">
						<!-- 提示 -->
						<div class="tips">
							<span>提示：点击图片框进行切换首页轮播图</span>
						</div>
						<!-- 轮播图 -->
						<div class="swiper-wrapped" v-for="(item,index) in swiperData" :key="index">
							<div class="swiper-name">轮播图{{index+1}}</div>
							<el-upload
							    class="avatar-uploader"
							    action="http://127.0.0.1:3007/set/uploadSwiper"
							    :show-file-list="false"
							    :on-success="handleSwiperSuccess"
							    :before-upload="beforeAvatarUpload"
								:data="item"
							  >
							  <template #trigger>
								  <img v-if="imageUrl[index]" :src="imageUrl[index]" class="swiper" />
								  <img src="@/assets/雪碧图.png" alt="" v-else>
							  </template>
							  </el-upload>
						</div>
					</div>
					
				</el-tab-pane>
			    <el-tab-pane label="其他设置" name="fourth">
					<div class="other-set">
						<div class="department-set">
							<span>部门设置</span>
							 <el-tag
							      v-for="tag in dynamicTags"
							      :key="tag"
							      closable
							      :disable-transitions="false"
							      @close="handleClose(tag)"
							    >
							      {{ tag }}
							    </el-tag>
							    <el-input
							      v-if="inputVisible"
							      ref="InputRef"
							      v-model="inputValue"
							      class="w-20"
							      size="small"
							      @keyup.enter="handleInputConfirm"
							      @blur="handleInputConfirm"
							    />
							    <el-button v-else class="button-new-tag" size="small" @click="showInput">
							      + 添加部门
							    </el-button>
						</div>
						<div class="product-set">
							<span>产品设置</span>
							 <el-tag
							      v-for="tag in dynamicProductTags"
							      :key="tag"
							      closable
							      :disable-transitions="false"
							      @close="handleProductClose(tag)"
							    >
							      {{ tag }}
							    </el-tag>
							    <el-input
							      v-if="inputProductVisible"
							      ref="InputProductRef"
							      v-model="inputProductValue"
							      class="w-20"
							      size="small"
							      @keyup.enter="handleInputConfirm"
							      @blur="handleInputProductConfirm"
							    />
							    <el-button v-else class="button-new-tag" size="small" @click="showProductInput">
							      + 添加产品
							    </el-button>
						</div>
					</div>
				</el-tab-pane>
			  </el-tabs>
		</div>
	</div>
	<!-- 修改密码弹窗 -->
	<change ref="changeP"></change>
	<editor ref="editorP"></editor>
	
	
</template>

<script lang="ts" setup>
	import { ElInput } from 'element-plus'
	import type { InputInstance } from 'element-plus'
	import breadCrumb from '@/components/bread_crumb.vue'
	import { ElMessage } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	import type { UploadProps } from 'element-plus'
	import {reactive,ref,nextTick,toRaw} from 'vue'
	import {useUserInfor} from '@/store/userinfor.js'
	import change from './components/change_password.vue'
	import {changeName,changeSex,changeEmail,bind} from '@/api/userinfor.js'
	import editor from './components/editor.vue'
	import { bus } from "@/utils/mitt.js"
	import {getCompanyName,changeCompanyName,getAllSwiper,setDepartment,getDepartment,setProduct,getProduct} from '@/api/setting.js'
	const userStore=useUserInfor()
	const changeP=ref()
	
	// 刷新渲染用户信息
	userStore.userInfor(localStorage.getItem('id'))
	// 面包屑
	const breadcrumb=ref()
	// 面包屑参数
	const item=ref({
		first:'系统设置'
	})

	const activeName = ref('first')
	
	// 头像上传成功的函数 response回应
	const handleAvatarSuccess: UploadProps['onSuccess'] = (
	  response,
	
	) => {
	  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	  console.log(response);
	  if(response.status===0){
		  userStore.$patch({
			  imageUrl:response.url
		  })
		  ElMessage({
		      message: '更新头像成功!',
		      type: 'success',
			}),
			(async()=>{
				await bind(userStore.account,response.onlyId,response.url)
			})()	
	  }else{
		   ElMessage.error('更新头像失败，请重新上传！')
	  }
	  
	}

	const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
	  if (rawFile.type !== 'image/jpeg') {
	    ElMessage.error('头像必须是jpg格式!')
	    return false
	  } else if (rawFile.size / 1024 / 1024 > 2) {
	    ElMessage.error('头像必须小于2MB!')
	    return false
	  }
	  return true
	}

	// 账号详情
	const AccountDetailData=reactive({
		account:'',
		identity:'',
		department:'',
		name:'',
		sex:'',
		email:''
	})
	
	// 打开修改密码弹窗
	const openChangePassword=()=>{
		changeP.value.open()
	}
	
	// 保存姓名
	const saveName=async()=>{
		const res=await changeName(userStore.name,localStorage.getItem('id'))
		console.log(res);
		if(res.status===0){
			ElMessage({
			    message: '修改姓名成功',
			    type: 'success',
			  })
			
		}else{
			ElMessage.error('修改姓名失败请重新输入！')
		}
	}
	// 保存性别
	const saveSex=async()=>{
		const res=await changeSex(userStore.sex,localStorage.getItem('id'))
		if(res.status===0){
			ElMessage({
			    message: '修改性别成功',
			    type: 'success',
			  })
		}else{
			ElMessage.error('修改性别失败请重新输入！')
		}
	}
	// 保存邮箱
	const saveEmail=async()=>{
		const res=await changeEmail(userStore.email,localStorage.getItem('id'))
		if(res.status===0){
			ElMessage({
			    message: '修改邮箱成功',
			    type: 'success',
			  })
		}else{
			ElMessage.error('修改邮箱失败请重新输入！')
		}
	}
	
	// 公司信息
	// 公司名称
	const companyName=ref()
	// 获取公司名字
	const getCompanyname=async()=>{
		companyName.value=await getCompanyName()
	}
	getCompanyname()
	
	// 修改公司名字
	const changeCompanyname=async()=>{
		const res=await changeCompanyName(companyName.value)
		if(res.status===0){
			ElMessage({
			    message: '修改公司名称成功',
			    type: 'success',
			  })
		}else{
			ElMessage.error('修改公司名称失败请重新输入！')
		}
	}
	const editorP=ref()
	// 打开富文本
	const openEditor=(id:number)=>{
		// 第一个参数是标记,第二个参数要传入的值
		bus.emit('editorTitle',id)
		editorP.value.open()
	}
	
    // 首页管理
	
	// 首页管理
		const swiperData = [{
			name: 'swiper1'
		}, {
			name: 'swiper2'
		}, {
			name: 'swiper3'
		}, {
			name: 'swiper4'
		}, {
			name: 'swiper5'
		}, {
			name: 'swiper6'
		}]
	
	//上传轮播图成功
	const handleSwiperSuccess:UploadProps['onSuccess']=(
	   response,
	)=>{
		console.log(response);
	}
	
	const imageUrl=ref([])
	//获取轮播图
	const getAllswiper=async()=>{
		imageUrl.value=await getAllSwiper()
		console.log(imageUrl.value);
	}
	getAllswiper()
	
	// ---------------其他设置---------------------------------------
	// 部门设置
	const inputValue = ref('')
	const dynamicTags = ref()
	const inputVisible = ref(false)
	const InputRef = ref<InputInstance>()
	
	// 产品设置
	const inputProductValue = ref('')
	const dynamicProductTags = ref()
	const inputProductVisible = ref(false)
	const InputProductRef = ref<InputInstance>()
	// 获取产品数据
	const getproduct=async()=>{
		dynamicProductTags.value=await getProduct()
		console.log(dynamicProductTags.value);
	}
	getproduct()
	
	// 获取部门数据
	const getdepartment=async()=>{
		dynamicTags.value=await getDepartment()
		console.log(dynamicTags.value);
	}
	getdepartment()
	
	// 部门关闭时的函数
	const handleClose =async (tag: string) => {
	  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
	  const res =await setDepartment(JSON.stringify(toRaw(dynamicTags.value)))
	  if(res.status===0){
	  	ElMessage({
	  	    message: '删除部门成功',
	  	    type: 'success',
	  	  })
	  }else{
	  	ElMessage.error('删除部门失败，请重新输入！')
	  }
	  
	}
	
	//产品关闭时的函数
	const handleProductClose =async (tag: string) => {
	  dynamicTags.value.splice(dynamicProductTags.value.indexOf(tag), 1)
	  const res =await setProduct(JSON.stringify(toRaw(dynamicProductTags.value)))
	  if(res.status===0){
	  	ElMessage({
	  	    message: '删除产品成功',
	  	    type: 'success',
	  	  })
	  }else{
	  	ElMessage.error('删除产品失败，请重新输入！')
	  }
	  
	}
	// 点击部门按钮出现输入框
	const showInput = () => {
	  inputVisible.value = true
	  nextTick(() => {
	    InputRef.value!.input!.focus()
	  })
	}
	// 点击按产品钮出现输入框
	const showProductInput = () => {
	  inputProductVisible.value = true
	  nextTick(() => {
	    InputProductRef.value!.input!.focus()
	  })
	}
	// 输入数据后的一个函数---部门
	const handleInputConfirm =async () => {
	  if (inputValue.value) {
	    dynamicTags.value.push(inputValue.value)
		const res =await setDepartment(JSON.stringify(toRaw(dynamicTags.value)))
		if(res.status===0){
			ElMessage({
			    message: '添加部门成功',
			    type: 'success',
			  })
		}else{
			ElMessage.error('添加部门失败，请重新输入！')
		}
		
	  }
	  inputVisible.value = false
	  inputValue.value = ''
	}
	// 输入数据后的一个函数---产品
	const handleInputProductConfirm =async () => {
	  if (inputProductValue.value) {
	    dynamicProductTags.value.push(inputProductValue.value)
		const res =await setProduct(JSON.stringify(toRaw(dynamicProductTags.value)))
		if(res.status===0){
			ElMessage({
			    message: '添加产品成功',
			    type: 'success',
			  })
		}else{
			ElMessage.error('添加产品失败，请重新输入！')
		}
		
	  }
	  inputProductVisible.value = false
	  inputProductValue.value = ''
	}
	
</script>

<style lang="scss" scoped>
	// 外壳
	.common-wrapped{
		padding:8px;
		background: #f5f5f5;
		height:calc(100vh - 101px);
		// 内容
		.common-content{
			padding:0 10px;
			height:100%;
			background: #fff;
			// 账号信息外壳
			.account-infor-wrapped{
				display:flex;
				align-items: center;
				padding-left:50px;
				margin-bottom: 24px;
				font-size: 14px;
				// 账号信息内容
				.account-infor-content{
					margin-left: 24px;
					margin-right: 16px;
				}
				.account-save-button{
					margin-left: 16px;
				}
			}
			// 首页管理外壳
			.home-wrapped{
				padding-left:50px;
				display:flex;
				flex-direction: column;
				// 提示
				.tips{
					display:flex;
					align-items:center;
					margin-bottom: 8px;
					span{
						font-size:14px;
						color:silver;
					}
				}
				// 轮播图
				.swiper-wrapped{
					display:flex;
					margin-bottom: 16px;
					// 轮播图名字
					.swiper-name{
						font-size:14px;
						margin-bottom: 24px;
					}
					.swiper{
						width: 336px;
						height:96px;
					}
				}
			}
		}
	}
	
	// 其他设置
	.other-set{
		padding-left: 50px;
		font-size:14px;
		.department-set{
			margin-bottom: 24px;
			span{
				margin-right: 24px;
			}
			
		}
		.product-set{
			span{
				margin-right: 24px;
			}
			
		}
		
	}
	
	// 标签页
	.demo-tabs > .el-tabs__content {
	  padding: 32px;
	  color: #6b778c;
	  font-size: 32px;
	  font-weight: 600;
	}
	// 上传头像
	.avatar-uploader .avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	}
	
	:deep(.el-select){
		width:240px
	}
	:deep(.el-input){
		width:240px
	}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>